<template>
	<view class="page-container" :style="{'background-image':`url(${pageBg})`}" @touchmove.stop.prevent>
		<u-navbar leftIconColor="rgba(255,255,255,.36)" @leftClick="backToPage" bgColor="transparent">
		</u-navbar>
		<template v-if="page == 'start-1'">
			<view class="page-start-1">

				<view class="star-wrapper">
					<view class="star-1-pos" :class="{'star-1-ani':animationStar1}">
						<image class="img-box" :src="staticImgs.p1.star1" mode="widthFix"></image>
					</view>
					<view class="star-2-pos">
						<image class="img-box" :src="staticImgs.p1.star2" mode="widthFix"></image>
					</view>
				</view>

				<view class="btn-pos">
					<!-- 开启我的鉴定指南 -->
					<image @click="changePage('start-2')" class="btn-box" :src="staticImgs.p1.startBtn" mode="widthFix">
					</image>
				</view>

				<view class="cloud-pos">
					<view class="cloud-wrapper">
						<view class="cloud-l-pos">
							<image class="cloud-box" :src="staticImgs.p1.cloudL" mode="widthFix"></image>
						</view>
						<view class="cloud-r-pos">
							<image class="cloud-box" :src="staticImgs.p1.cloudR" mode="widthFix"></image>
						</view>
						<view class="cloud-bot-pos">
							<image class="cloud-box" :src="staticImgs.p1.cloudBot" mode="widthFix"></image>
						</view>
					</view>
				</view>

			</view>
		</template>

		<template v-else-if="page == 'start-2'">
			<view class="page-start-2">
				<view class="tit-box">
					<image class="img-box" :src="staticImgs.p2.tit" mode="widthFix"></image>
				</view>
				<view class="opts-box">
					<view v-for="(opt,index) in optArr" class="img-box" :key="index" :style="[opt.sty]">
						<image class="img" :src="opt.img" mode="widthFix"></image>
					</view>
				</view>
				<view class="btn-pos">
					<!-- 开启我的鉴定指南 -->
					<image @click="startBtnHandle" class="btn-box" :src="staticImgs.p1.startBtn" mode="widthFix">
					</image>
				</view>
			</view>
		</template>

		<tempalte v-else-if="page == 'prev-1' && loadData">
			<PrevOne :act="prevSelectAnswerArr[0]" :opts="actOptArr" @next="prevNextHandle" />
		</tempalte>
		<tempalte v-else-if="page == 'prev-2' && loadData">
			<PrevTwo :act="prevSelectAnswerArr[1]" :opts="actOptArr" @prev="prevPrevHandle" @next="prevNextHandle" />
		</tempalte>
		<template v-else-if="page == 'prev-3'">
			<PrevThree :act="prevSelectAnswerArr[2]" :opts="actOptArr" @prev="prevPrevHandle" @next="prevNextHandle" />
		</template>
		<template v-else-if="page == 'prev-4'">
			<PrevFour :act="prevSelectAnswerArr[3]" :opts="actOptArr" @prev="prevPrevHandle" @next="prevNextHandle" />
		</template>
		<template v-else-if="page == 'prev-5'">
			<PrevFive :act="prevSelectAnswerArr[4]" :opts="actOptArr" @prev="prevPrevHandle" @done="prevNextHandle" />
		</template>

		<template v-else-if="page=='main'">
			<MainPage1 :isPay="isPayOk" :info="actScl" :sclList="sclBoxList" :showNext="showMainNext"
				:showPrev="showMainPrev" @to="mainToHandle" @prev="mainPrevHandle" @next="mainNextHandle" />
		</template>


		<DialogMask v-if="showTipModal && tipObj && tipObj.content" @click="dialogClose">
			<template #content>
				<text>
					{{tipObj.content || ''}}
				</text>
			</template>
		</DialogMask>

	</view>
</template>

<script>
	import PrevOne from './comp/prev-one.vue'
	import PrevTwo from './comp/prev-two.vue'
	import PrevThree from './comp/prev-three.vue'
	import PrevFour from './comp/prev-four.vue'
	import PrevFive from './comp/prev-five.vue'
	import DialogMask from './comp/DialogMask.vue'
	import MainPage from './comp/MainPage.vue'
	import MainPage1 from './comp/MainPage1.vue'

	import {
		mapGetters,
		mapState
	} from 'vuex'

	export default {
		components: {
			PrevOne,
			PrevTwo,
			PrevThree,
			PrevFour,
			PrevFive,
			DialogMask,
			MainPage,
			MainPage1
		},
		data() {
			return {
				staticImgs: {
					p1: {
						bg: this.imgBaseURL + "/scl/checkup-sexuality/bg-1-v3.jpg",
						cloudL: this.imgBaseURL + "/scl/checkup-sexuality/cloud-l.png",
						cloudR: this.imgBaseURL + "/scl/checkup-sexuality/cloud-r.png",
						cloudBot: this.imgBaseURL + "/scl/checkup-sexuality/cloud-bot.png",
						star1: this.imgBaseURL + "/scl/checkup-sexuality/star-1.png",
						star2: this.imgBaseURL + "/scl/checkup-sexuality/star-2.png",
						startBtn: this.imgBaseURL + "/scl/checkup-sexuality/start-btn.png",
					},
					p2: {
						bg: this.imgBaseURL + "/scl/checkup-sexuality/p2/bg-2.jpg",
						tit: this.imgBaseURL + "/scl/checkup-sexuality/p2/tit-v3.png",

						optL1: this.imgBaseURL + "/scl/checkup-sexuality/p2/opt-l-1.png",
					},
					prev1: {
						bg: this.imgBaseURL + "/scl/checkup-sexuality/prev-p1/bg.png",
					}
				},
				mainPageImg: this.imgBaseURL + "/scl/checkup-sexuality/main/nv-2.jpg",
				optArr: [{
						img: this.imgBaseURL + "/scl/checkup-sexuality/p2/opt-l-1.png",
						sty: {
							width: '465rpx',
							left: '50rpx',
							top: 0,
						}
					},
					{
						img: this.imgBaseURL + "/scl/checkup-sexuality/p2/opt-l-2.png",
						sty: {
							width: '540rpx',
							left: '50rpx',
							top: '320rpx'
						}
					},
					{
						img: this.imgBaseURL + "/scl/checkup-sexuality/p2/opt-l-1.png",
						sty: {
							width: '522rpx',
							left: '50rpx',
							top: '640rpx'
						}
					},
					{
						img: this.imgBaseURL + "/scl/checkup-sexuality/p2/opt-r-1.png",
						sty: {
							width: '454rpx',
							right: '50rpx',
							top: '160rpx'
						}
					},
					{
						img: this.imgBaseURL + "/scl/checkup-sexuality/p2/opt-r-2.png",
						sty: {
							width: '488rpx',
							right: '50rpx',
							top: '480rpx'
						}
					}
				],
				page: '',
				animationStar1: false,
				aniBool: true,
				pageBg: '',
				pageOk: false,
				showTipModal: false,
				tipObj: {
					content: 'test'
				},
				isPayOk: false,
				tipsList: [],
				currentReportId: '',
				sclBoxList: [],
				groupId: '',
				actIndex: 0,
				actScl: {},
				prevIndex: 0,
				// prevSelectAnswerArr:[2,'11',15,29,38],
				prevSelectAnswerArr: [],
				qstnList: [],
				actOptArr: [],
				loadData: false,
				pageOpts: {},
				sclId: '',
				// 分享配置
				shareData: {
					title: '性取向综合鉴定指南',
					path: '/pages/index/index?userType=sexuality-assessment',
					imageUrl: this.imgBaseURL + "/scl/checkup-sexuality/share-v2.png",
					desc: '',
					content: ''
				}
			}
		},
		computed: {
			...mapState({
				userJson: state => state.user.userJson,
			}),
			...mapGetters('user', ['canSeeCheckupSexualityIntro', 'hasSexualorientationAnswer']),
		},
		onLoad(opts) {
			const that = this

			function preload(arr) {
				for (let i = 0; i < arr.length; i++) {
					uni.getImageInfo({
						src: arr[i],
						success() {
							that.pageOk = true
						}
					})
				}
			}

			preload([
				this.staticImgs.p1.bg,
				this.staticImgs.p2.bg
			])

			this.pageOpts = opts
			this.sclId = this.pageOpts.sclId

			console.log(opts, '===opts===')
			const submitForm = this.$removeEmptyProperty({
				sclId: this.pageOpts.sclId
			})
			this.getPageData(submitForm);

			// uni.$on('update-sexuality', (opts) => {
			// 	this.pageOpts = opts
			// 	this.sclId = this.pageOpts.sclId

			// 	console.log(opts, '===opts===')
			// 	const submitForm = this.$removeEmptyProperty({
			// 		sclId: this.pageOpts.sclId
			// 	})
			// 	this.getPageData(submitForm);
			// })
			// this.changePage('main') //记得删除
		},
		onShow() {
			this.aniBool = true
		},
		onHide() {
			this.aniBool = false
		},
		methods: {
			async getPageData(submitForm1) {
				this.randomAnimation()

				this.setPageBg()

				if (this.canSeeCheckupSexualityIntro) {
					const {
						data: tmpRes
					} = await this.$u.api.getSexualityQstList(submitForm1)
					this.qstnList = tmpRes.data
					this.actOptArr = this.qstnList[0].answer
					this.changePage('start-1')
				} else if (this.hasSexualorientationAnswer) {
					this.changePage('main')
				} else {
					const {
						data: tmpRes
					} = await this.$u.api.getSexualityQstList(submitForm1)
					this.qstnList = tmpRes.data
					this.actOptArr = this.qstnList[0].answer

					this.changePage('prev-1')
					// this.changePage('start-1')
				}



				this.$u.api.isPaySclExamination({
					goodsCode: this.$dictMap.CHECKUP_SEXUALITY
				}).then(async ({
					data: res
				}) => {
					this.isPayOk = res.data
					if (!this.canSeeCheckupSexualityIntro) {
						await this.initDialog()
					}
				})


				let submitForm = this.$removeEmptyProperty({
					sclId: this.pageOpts.sclId,
					sclTotalCode: this.$dictMap.CHECKUP_SEXUALITY
				})
				this.loadData = false
				this.$u.api.getSclListByGroup(submitForm).then(({
					data: res
				}) => {
          if (!res.success) {
            // 错误提示
            uni.showModal({
              title: res.message,
              showCancel: false,
              confirmText: '回到大厅',
              confirmColor: '#666',
              success: res => {
                if (res.confirm) {
                  uni.showLoading()
                  uni.reLaunch({
                    url: '/pages/sclList/sclList',
                    success: () => uni.hideLoading()
                  })
                }
              }
            })
            return
          }
					this.sclBoxList = []
					this.groupId = res.data.sclId
					this.actIndex = 0
					let hasChange = false
					res.data.sclExaminationBOS.map((item, index) => {
						const sclBox = {}
						sclBox.tit = item.remark
						sclBox.sclExaminationReprotId = item.sclExaminationReprotId
						sclBox.hasReport = item.isSclReport
						sclBox.sclId = item.sclId
						sclBox.status = sclBox.hasReport == 'Y' ? 1 : 0
						sclBox.isFirst = index === 0
						sclBox.shortRes = item.healthType

						if (!hasChange && item.isSclReport != 'Y') {
							this.actIndex = index
							hasChange = true
						}

						this.sclBoxList.push(sclBox)
					})

					console.log(this.actIndex, '===this.actIndex==')
					console.log(this.sclBoxList, '===this.sclBoxList')
					this.actScl = this.sclBoxList[this.actIndex]
					console.log('getSclListByGroup：', res)
					
					this.loadData = true
				})

			},
			backToPage() {
				// 获取是否存在上一页面，如果不存在则返回到测评大厅
				const pages = getCurrentPages()

				if (pages.length === 1) {
					uni.reLaunch({
						url: '/pages/sclList/sclList'
					})
				} else {
					uni.navigateBack()
				}
			},
			setPageBg() {
				this.$u.api.sclSexualOrientationLabel().then(({
					data: res
				}) => {

					if (res.data && res.data[0]) {
						const tmpRes = res.data[0]
						console.log(tmpRes, '===tmpRes')
						if (tmpRes == '美丽的小姐姐') {
							this.mainPageImg = this.imgBaseURL + "/scl/checkup-sexuality/main/nv-v3.jpg"
						} else if (tmpRes == '帅气的小哥哥') {
							this.mainPageImg = this.imgBaseURL + "/scl/checkup-sexuality/main/nan-v3.jpg"
						} else if (tmpRes == '特立独行的跨性别者') {
							this.mainPageImg = this.imgBaseURL + "/scl/checkup-sexuality/main/kua-v3.jpg"
						} else if (tmpRes == '充满魅力的无性别者') {
							this.mainPageImg = this.imgBaseURL + "/scl/checkup-sexuality/main/wu-v3.jpg"
						} else if (tmpRes == '雨露均沾的双性别者') {
							this.mainPageImg = this.imgBaseURL + "/scl/checkup-sexuality/main/shuang-v3.jpg"
						}

						if (this.page == 'main') {
							this.pageBg = this.mainPageImg
						}
					}
				})
			},
			prevPrevHandle() {
				const currentIndex = parseInt(this.page.split('-')[1])
				const prevIndex = currentIndex - 1

				this.actOptArr = this.qstnList[prevIndex - 1].answer
				this.changePage('prev-' + prevIndex)
			},
			prevNextHandle(selectIndex, qstnIndex) {
				// todo：这里0起步和1起步容易造成困扰 记得改一下
				const currentIndex = parseInt(this.page.split('-')[1])
				const nextIndex = currentIndex
				const currentOptArr = JSON.parse(JSON.stringify(this.actOptArr))
				let optVal

				if (qstnIndex === 2) {
					// todo：第二题选择年龄的处理
					optVal = selectIndex
				} else {
					optVal = currentOptArr[selectIndex].key
				}

				this.prevSelectAnswerArr[currentIndex - 1] = optVal

				if (currentIndex == 5) {
					this.prevSelectAnswerArr[1] = '6'

					uni.showLoading({
						title: '加载中...'
					})

					return this.submitPrevAnswer()
				}

				this.actOptArr = this.qstnList[nextIndex].answer
				this.changePage('prev-' + (parseInt(this.prevIndex) + 1))
			},
			submitPrevAnswer() {
				const answerStr = JSON.stringify(this.prevSelectAnswerArr)

				let tmpJsonStr
				let tmpObj = {}
				try {
					tmpJsonStr = JSON.parse(this.userJson)
					tmpObj = {
						...tmpJsonStr
					}
					tmpObj.sclSexualOrientationAnswer = answerStr
					tmpJsonStr = JSON.stringify(tmpObj)
					this.$u.api.updateUserInfo({
						userJson: tmpJsonStr
					}).then(async res => {
						this.$store.commit('user/setUserJson', tmpJsonStr)

						await this.initDialog()
						uni.hideLoading()
						this.changePage('main')
					})
				} catch (e) {}
			},
			mainToHandle() {
				uni.navigateTo({
					url: '/subcontractorD/pages/sclDoQuestion/sclDoQuestion?paramObj=' + JSON.stringify({
						sclId: this.actScl.sclId,
						sclReportType: 3,
						hasOwn: this.isPayOk
					})
				})
			},
			mainPrevHandle() {
				const maxL = this.sclBoxList.length
				if (this.actIndex === 0) {
					this.actIndex = maxL - 1
				} else {
					this.actIndex = this.actIndex - 1
				}
				this.actScl = this.sclBoxList[this.actIndex]
			},
			mainNextHandle() {
				const maxL = this.sclBoxList.length
				if (this.actIndex < maxL) {
					this.actIndex = this.actIndex + 1
				} else {
					this.actIndex = 0
				}
				this.actScl = this.sclBoxList[this.actIndex]
			},
			startBtnHandle() {
				this.updateUserJson('canSeeCheckupSexualityIntro')
				this.initDialog()
				this.changePage('prev-1')
			},
			initDialog() {

				const submitForm = this.$removeEmptyProperty({
					sclId: this.pageOpts.sclId,
					sclTotalCode: this.$dictMap.CHECKUP_SEXUALITY,
				})

				this.$u.api.getWriterDetail(
					submitForm
				).then(({
					data: res
				}) => {
					if (res.code == 200) {
						this.tipsList = res.data.jsonArray

						if (res.data.showKey) {
							this.currentTipIndex = this.tipsList.findIndex(obj => obj.key === res.data.showKey)
							this.currentTipKey = res.data.showKey
							this.tipObj = this.tipsList[this.currentTipIndex]
							this.showTipModal = true
						}
					}
					console.log('getWriterDetail：', res.data)
				})
			},
			updateUserJson(param) {
				let tmpJsonStr
				let tmpObj = {}
				try {
					tmpJsonStr = JSON.parse(this.userJson)
					tmpObj = {
						...tmpJsonStr
					}
					tmpObj[param] = 'Y'
					tmpJsonStr = JSON.stringify(tmpObj)
					this.$u.api.updateUserInfo({
						userJson: tmpJsonStr
					}).then(res => {
						this.$store.commit('user/setUserJson', tmpJsonStr)
					})
				} catch (e) {}
			},
			dialogClose() {
				this.showTipModal = false
			},
			changePage(p) {
				console.log(p, '----p---');
				this.page = p
				const pageObj = {
					'start-1': this.staticImgs.p1.bg,
					'start-2': this.staticImgs.p2.bg,
					'prev-1': this.staticImgs.prev1.bg,
					'prev-2': this.staticImgs.prev1.bg,
					'prev-3': this.staticImgs.prev1.bg,
					'prev-4': this.staticImgs.prev1.bg,
					'prev-5': this.staticImgs.prev1.bg,
					// 'main': this.mainPageImg,
				}

				if (p.includes('prev')) {
					this.prevIndex = p.split('-')[1]
				}

				if (p == 'main') {
					this.setPageBg()
				} else {
					this.pageBg = pageObj[p]
				}
			},
			randomAnimation() {
				if (!this.aniBool) return
				// animationStar1
				this.animationStar1 = true

				setTimeout(() => {
					this.animationStar1 = false
					setTimeout(() => {
						this.randomAnimation()
					}, uni.$u.random(2000, 6000))
				}, 2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-container {
		position: relative;
		display: flex;
    min-height: 100vh;
    height: 1600rpx;
    align-items: flex-start;
		background-size: cover;
		transition: all .8s ease-in-out;
		background-color: #1c3a5d;
		opacity: 0;
		animation: 1s btn-animation ease-in-out 1;
		animation-fill-mode: forwards;
		max-width: 100vw;
		overflow-x: hidden;
		overflow-y: hidden;

		.page-start-1,
		.page-start-2,
		.page-main {
			position: relative;
			height: 100%;
			width: 100%;
		}

		.page-start-1 {

			>.star-wrapper {
				width: 100%;
				position: relative;
				margin-top: 38vh;

				.star-1-pos {
					position: absolute;
					right: 200rpx;
					top: -66rpx;

					.img-box {
						width: 230rpx;
						height: 230rpx;
					}

				}

				.star-1-ani {
					// background-color: red;
					animation: 1s star-animation linear 2;
				}

				.star-2-pos {
					position: absolute;
					left: 168rpx;

					.img-box {
						width: 100rpx;
						height: 100rpx;
					}

					animation-delay: 1s;
					animation: 4s star-animation ease-in-out infinite;
				}
			}

			>.btn-pos {
				position: fixed;
				bottom: 6vh;
				left: 0;
				right: 0;
				z-index: 2;
				display: flex;
				justify-content: center;

				.btn-box {
					width: 580rpx;
					height: 166rpx;
					margin: auto;
					opacity: 0;

					animation-delay: 3s;
					animation: 1s btn-animation ease-in-out 1;
					animation-fill-mode: forwards;
				}
			}

			>.cloud-pos {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 1;

				.cloud-wrapper {
					width: 750rpx;
					height: 414rpx;
					position: relative;

					animation-delay: 3s;
					animation: 2s cloud-animation ease-in 1;
					animation-fill-mode: forwards;
					animation-name: fadeIn;

					.cloud-l-pos {
						position: absolute;
						left: 0;
						bottom: 120rpx;

						>.cloud-box {
							width: 375rpx;
							height: 258rpx;
							opacity: .92;
						}
					}

					.cloud-r-pos {
						position: absolute;
						right: 0;
						bottom: 120rpx;

						>.cloud-box {
							width: 375rpx;
							height: 270rpx;
							opacity: .89;
						}
					}

					.cloud-bot-pos {
						position: absolute;
						left: 0;
						bottom: 0;

						>.cloud-box {
							width: 654rpx;
							height: 258rpx;
						}

						animation-delay: 4s;
						// animation: 3s cloud-animation 0s infinite;
						animation: 3s star-animation 0s infinite;
					}
				}


			}
		}

		.page-start-2 {
			>.btn-pos {
				position: fixed;
				bottom: 6vh;
				left: 0;
				right: 0;
				z-index: 2;
				display: flex;
				justify-content: center;

				.btn-box {
					width: 580rpx;
					height: 166rpx;
					margin: auto;
					opacity: 0;

					animation-delay: 3s;
					animation: 1s btn-animation ease-in-out 1;
					animation-fill-mode: forwards;
				}
			}

			>.opts-box {
				position: relative;
				width: 100%;
				height: 730rpx;

				// position: absolute;
				// left: 168rpx;


				.img-box {
					position: absolute;

					.img {
						width: 100%;
						height: 100%;
					}
				}

			}

			>.tit-box {
				margin-top: 90rpx;
				display: flex;
				justify-content: center;

				.img-box {
					width: 670rpx;
					height: 370rpx;
				}
			}
		}

		.page-main {

			>.tags-wrapper,
			>.tit-img,
			>.figure-img {
				position: absolute;

			}

			>.main-block {
				width: 100%;
				height: 400rpx;
				background-color: red;
			}
		}

	}


	@keyframes cloud-animation {
		0% {
			bottom: -200rpx;
		}

		// 50% {
		//   bottom: 40rpx;
		// }

		100% {
			bottom: 0;
		}
	}

	@keyframes star-animation {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0.5;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes btn-animation {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
</style>